<!-- 倒计时 -->
<template>
  <div class="countdownBox">
    <p class="title">{{ $t("countdown-tip") }}</p>
    <div class="countdown">
      <div v-if="timeStatus === '1'" class="box">
        <span class="big">{{ days }}</span>
        <span class="unit">{{ $t("countdown-days") }}</span>
        <!-- <span class="big">{{hours}}</span>
            <span class="unit">小时</span>
            <span class="big">{{minutes}}</span>
            <span class="unit">分</span>
            <span class="big">{{seconds}}</span>
            <span class="unit">秒</span> -->
      </div>
      <div class="big" v-else>
        {{ showTip }}
      </div>
    </div>
  </div>
</template>

<script>
import { getCurrentExhibition } from "@/api/common";
export default {
  data() {
    return {
      startTime: "",
      endTime: "",
      days: "00",
      hours: "00",
      minutes: "00",
      seconds: "00",
      showTip: "",
      // tips: {
      //     doing: '本届展会开展中',
      //     end: '本届展会已结束'
      // },
      timeStatus: "1", // 1 展前 2 展中 3 展后
    };
  },
  mounted() {
    this.getDataFun();
  },
  methods: {
    // 倒计时
    countdown() {
      let timer = null;
      // 获取当前时间
      let date = new Date();
      let now = date.getTime();
      // 设置截止时间
      let startDate = new Date(this.startTime);
      let endDate = new Date(this.endTime);
      let start = startDate.getTime();
      let end = endDate.getTime();
      let leftTime = start - now;

      if (now < start) {
        this.timeStatus = "1";
      } else if (now >= start && now <= end) {
        this.timeStatus = "2";
      } else if (now > end) {
        this.timeStatus = "3";
      }

      // 开展前
      if (this.timeStatus === "1") {
        // 天
        let days = Math.floor(leftTime / 1000 / 60 / 60 / 24);
        this.days = days < 10 ? "0" + days : days;
        // 时
        let h = Math.floor((leftTime / 1000 / 60 / 60) % 24);
        this.hours = h < 10 ? "0" + h : h;
        // 分
        let m = Math.floor((leftTime / 1000 / 60) % 60);
        this.minutes = m < 10 ? "0" + m : m;
        // 秒
        let s = Math.floor((leftTime / 1000) % 60);
        this.seconds = s < 10 ? "0" + s : s;
        // 展中
      } else if (this.timeStatus === "2") {
        // this.showTip = this.tips.doing
        this.showTip = this.$t("countdown-doing");
      } else {
        // 展后
        // this.days = '00'
        // this.hours = '00'
        // this.minutes = '00'
        // this.seconds = '00'
        // this.showTip = this.tips.end
        this.showTip = this.$t("countdown-end");
      }
      if (Number(this.hours) === 0 && Number(this.days) === 0 && Number(this.minutes) === 0 && Number(this.seconds) === 0) {
        clearTimeout(timer);
        return;
      } else {
        timer = setTimeout(this.countdown, 1000);
      }
    },
    getDataFun() {
      this.invoke(getCurrentExhibition).then((res) => {
        if (res && res.code == 200) {
          this.data = res.data;
          if (res.data) {
            this.startTime = res.data.startTime;
            this.endTime = res.data.endTime;
            this.$nextTick(() => {
              this.countdown();
            });
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
// 倒计时
.countdownBox {
  $cTitle: #333;
  display: flex;
  justify-content: space-between;
  flex-direction: column;

  .title,
  .countdown {
    line-height: 1em;
    white-space: nowrap;
    margin: 0;
  }
  .title,
  .unit {
    font-size: 20px;
    color: $cTitle;
  }

  .countdown {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .box {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      width: 100%;
    }
    &.isCenter {
      justify-content: center;
    }

    .big,
    .unit {
      line-height: 1em;
    }

    .big {
      font-weight: bold;
      font-size: 30px;
      color: #d53b76;
      margin-right: 10px;
    }
  }
}
.floatBox {
  .countdownBox {
    $cTitle: #fff;
    .title,
    .unit {
      color: $cTitle;
    }
  }
}
</style>
<style lang="scss" scoped>
@media (min-width: 1000px) and (max-width: 1570px) {
  // 倒计时
  .countdownBox {
    .title,.unit {
      font-size: 14px;
    }

    .countdown {
      font-size: 14px;

      .big {
        font-size: 24px;
      }
    }
  }
}
</style>
<style lang="scss" scoped>
@media (min-width: 768px) and (max-width: 999px) {
  // 倒计时
  .countdownBox {
    justify-content: flex-end;
    height: 40px;
    .title,.unit {
      font-size: 14px;
    }

    .countdown {
      font-size: 14px;

      .big {
        font-size: 24px;
      }
    }
  }
}
</style>

<style lang="scss" scoped>
@media (max-width: 767px) {
  .countdownBox {
    height: auto;
    justify-content: flex-end;
    flex-direction: row;
    padding: 10px 0;

    .title{
      font-size: 14px;
      margin-right: 10px;
      display: flex;
      align-items: center;
    }
    .countdown {
      justify-content: flex-end;
      padding-right: 20px;
      .box{
        align-items: center;
      }
      .big {
        font-size: 20px;
      }
      .unit {
        font-size: 14px;
      }
    }
  }
}
</style>
